<template>
    <div class="chatList robotChatLog chatLogList">
        <div class="chatDataList" id="chatDataList">
            <div class="chatDataItem" v-for="(item,index) in chatListData" :key="index">
                <p class="time">{{item.questionCreateTime}}</p>
                <div class="visitor-msg" v-if="item.question">
                    <div class="msg">{{item.question}}</div>
                    <span class="iconfont icon-fangketouxiang icontx"></span>
                </div>
                <div v-if="item.robotReply">
                    <div class="robot-msg" v-for="(inner,i) in item.robotReply" :key="i">
                        <img src="@/assets/images/head.png" alt="">

                        <div class="msg-content">
                            <div class="msg" v-if="['text','unknown'].includes(inner.msgtype)" v-html="inner.text.content">
                            </div>
                            <div class="msg notbg" v-else-if="inner.msgtype == 'image'" v-viewer>
                                <img :src="inner.image.url" :alt="inner.image.name">
                            </div>
                            <div class="msg notbg" v-else-if="inner.msgtype == 'voice'">
                                <audio :src="inner.voice.url" controls></audio>
                            </div>
                            <div class="msg notbg" v-else-if="inner.msgtype == 'video'">
                                <video :src="inner.video.url" controls></video>
                            </div>
                            <div class="msg" v-else-if="inner.msgtype == 'file'">
                                <el-link :href="inner.file.url" target="_blank" type="primary">{{inner.file.name}}</el-link>
                            </div>
                            <div class="msg notbg graphics" v-else-if="inner.msgtype == 'news'">
                                <div v-for="(atc, num) in inner.news.articles" class="graphicsItem" @click="openLink(atc.url)">
                                    <img :src="atc.picurl" :alt="atc.title">
                                    <p class="title">{{atc.title}}</p>
                                </div>
                            </div>
                            <div class="msg" v-else-if="inner.msgtype == 'richText'">
                                <div v-html="inner.richText.content" v-viewer></div>
                            </div>

                            <div class="msg robotRec" v-else-if="inner.msgtype == 'guide'">
                                <p class="preDesc">{{inner.guide.beforeWord}}</p>
                                <div class="recQuestion" v-for="(glist, j) in inner.guide.list" :key="j">
                                    {{glist.question}}
                                </div>
                                <p class="aftDesc" v-if="inner.guide.afterWord">{{inner.guide.afterWord}}</p>
                            </div>

                            <div class="msg robotRec" v-else-if="inner.msgtype == 'options'">
                                <p class="preDesc">{{inner.options.beforeWord}}</p>
                                <div class="recQuestion" v-for="(glist, j) in inner.options.list" :key="j">
                                    {{glist.option}}
                                </div>
                                <p class="aftDesc" v-if="inner.options.afterWord">{{inner.options.afterWord}}</p>
                            </div>

                            <div class="msgRec robotRec" v-if="inner.recommendQuestion">
                                <p class="preDesc">{{inner.recommendQuestion.beforeWord}}</p>
                                <div class="recQuestion" v-for="(glist, j) in inner.recommendQuestion.list" :key="j">
                                    {{glist.question}}
                                </div>
                                <p class="aftDesc" v-if="inner.recommendQuestion.afterWord">
                                    {{inner.recommendQuestion.afterWord}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="time" v-if="item.seatType == 'seatAuto'">自动转人工</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "chatList",
    props: {
        chatListData: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    methods: {
        openLink(url) {
            if (url) {
                window.open(url);
            }
        },
    },
    watch: {
        chatListData(val) {
            var container = document.querySelector(".chatLogList");
            if (container) {
                container.scrollTop = 0;
            }
        }
    }
}
</script>
